
			body {
				height: 1300px;
				padding: 0;
				/*height: 4000px;*/
				
			}
			* {
				padding: 0;
				margin: 0;
				
			}
			/*首先设定所有的链接元素 a 显示时没有下划线，颜色不要默认的蓝色，我要设置为黑色，更加习惯!!!*/
			a {
				text-decoration: none;
				color: black;
				
			}
			/*首先设定所有的靠近img图片的文字都与图片垂直居中对齐!!!*/
			img {
				vertical-align: middle;
				
			}
			
			#move_box {
				position: absolute;
				z-index: 300;
				padding: 0;
				width: 120px;
				height: 148px;
				transition: all 0.4s;
				animation: move_box 15s linear infinite alternate;
				
			}
			#move_box span {
				padding: 0;
				position: relative;
			}
			@-webkit-keyframes move_box{
				0% {top: 30px;left: 30px;transform: scale(1);}
				25% {top: 30px;left: 85%;transform: scale(1.5);border: 2px solid red;}
				50% {top: 650px;left: 85%;transform: scale(1);border: 5px double blue;}
				75% {top: 650px;left: 85px;transform: scale(2);border: 3px dotted green;}
				100% {top: 30px;left: 85px;transform: scale(1);}
			}
			@keyframes move_box{
				0% {top: 30px;left: 30px;transform: scale(1);}
				25% {top: 30px;left: 85%;transform: scale(1.5);border: 2px solid red;}
				50% {top: 650px;left: 85%;transform: scale(1);border: 5px double blue;}
				75% {top: 650px;left: 85px;transform: scale(2);border: 3px dotted green;}
				100% {top: 30px;left: 85px;transform: scale(1);}
			}
			#move_box img:first-child {
				position: absolute;
				top: -75px;
				right: -10px;
				
			}
			#move_box:hover {
				transition: all 0.3s;
				animation-play-state: paused;
				
			}
			/*以下为每个标签 h2 里面的图片在鼠标悬浮在其对应的区域时,h2 里面的小图片就进行变大再变小再变大这样的循环动画*/
			#img_box:hover #team,
			#scie_research_area:hover h2 img,
			#weixin_area:hover #weixin_area01 h2 > img,
			#news_div:hover #news,
			#introduction:hover h2 img,
			#extra_links:hover h3 img {
				transition: all 0.4s;
				animation: scale 2s linear infinite alternate;
				
			}
			@keyframes scale{
				from{transform: scale(1);}
				to{transform: scale(1.5);}
			}
			
			
			h2 {
				background-color: #FFFFCC;
				
				
			}
			
			#body_box {
				width: 90%;
				height: 100%;
				margin: 0 auto;
				padding: 0;
			}
			
			/* 以下为窗口中固定在窗口右侧的包含首页,微信公众号二维码图片及回到顶部这些小盒子的大盒子的样式设计 */
			#fixed_right_box {
				border: 1px solid aqua;
				position: fixed;
				right: 5px;
				bottom: 100px;
				width: 37px;
				padding: 0;
				margin: 0;
				z-index: 500;
				transition: all .4s;
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-ms-transition: all .4s;
			}
			/* 命令窗口中固定在右侧的第一个子盒子 “ 首页 ” 无上边框 */
			#fixed_right_box > div:not(first-child) {
				border-top: 1px #00FFFF solid;
				padding: 0;
			}
			#fixed_right_box:hover {
				transition: all .4s;
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-ms-transition: all .4s;
				/* 注意这里,整个窗口右侧固定的大盒子在鼠标悬浮时增大后需要进行微信公众号二维码图片等的位置设置对齐等样式 */
				transform: translate(-20px,0) scale(1.5); 
			
			}
			
			.weiXinImg_class {   /* 这是包含微信公众号二维码图片 和 存放时间 的盒子样式,设其位置属性position为relative,因为  子绝父相 */
				position: relative;
			}
			
			/* 显示时间的小盒子先让它隐藏,display=none */
			#time_save_box {
				display: none;
				font-size: 10px;
				line-height: 16px;
			}
			/* 等到鼠标悬浮在显示时间的盒子的父级盒子上时就让显示时间的子盒子display=block 显示出来*/
			#time:hover #time_save_box {
				transition: all .4s;
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-ms-transition: all .4s;
				display: block;
				width: 160px;
				height: 46px;
				
				position: absolute;
				top: -1px;
				right: 37px;
				text-align: center;
				border: 1px solid #00FFFF;
				border-radius: 30px 0 0 30px;
				background-color: rgba(5, 139, 244, 0.1);
			}
			
			/*这里是 " 首页 " 处鼠标移至其上时显示出三角形和包含官网二维码的盒子*/
			.shouYe {
				font-size: 62.5%;
				text-align: center;
			}
			.shouYe_triangle {
				display: none;
				transition: all 0.3s;
				background-color: #FFFFFF;
				
			}
			.shouYe:hover .shouYe_triangle {
				display: block;
				position: absolute;
				left: -176px;
				bottom: -20px;
				width: 150px;
				border: 5px aliceblue solid;
				
			}
			#shouYe_triangle {
				width: 0;
				height: 0;
				border: transparent 20px solid;
				border-left-color: aliceblue;
				position: fixed;
				bottom: 60%;
				right: 18px;
				transition: all 0.3s;
			}
			
			
			/* 这里是  放置  微信公众号二维码图片  的小一级盒子盒子，先隐藏它，等鼠标移至其上面时再显示出来，此时不需要给她进行位置设置 */
			#weiXinImg {   
				transition: all .4s;
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-ms-transition: all .4s;
				display: none;
				background-color: white
			}
			#weiXinImg p {
				font-size: 62.5%;
				/*padding: 0 5px;*/
				text-align: center;
			}
			
			/* 这里是与微信公众号二维码图片一起的被包含在id=weiXinImg的盒子内的CSS样式设置中的三角形盒子 */
			#weiXinImg span {
				width: 0;
				height: 0;
				border: transparent 20px solid;
				border-left-color: aliceblue;
				position: fixed;
				bottom: 50px;
				right: 20px;
			}
			#weiXin:hover #weiXinImg {
				width: 150px;
				height: 180px;
				transition: all .4s;
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-ms-transition: all .4s;
				display: block;
				position: absolute;
				left: -175px;
				top: -110px;
				border: 3px aliceblue solid;
			}
			#contact {
				position: relative;
			}
			#contact01 {
				display: none;
				text-decoration: none;
				color: blue;
				background-color: white;
				padding-left: 10px;
				line-height: 2em;
			}
			
			#contact:hover #contact01 {
				width: 200px;
				height: 135px;
				transition: all .4s;
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-ms-transition: all .4s;
				display: block;
				position: absolute;
				left: -236px;
				top: -50px;
				text-align: left;
				font-size: 10px;
				border: 3px aliceblue solid;
				
			}
			#contact01 #span_triangle {
				width: 0;
				height: 0;
				border: transparent 20px solid;
				border-left-color: aliceblue;
				position: fixed;
				bottom: 90px;
				right: 18px;
			}
			#contact01 button {
				height: 1.8em;
				width: 6em;
				text-align: center;
				line-height: 1.7em;
				background-color: #0095ED;
				border: none;
				color: white;
			}
			
			
			/*以下为位于窗口底部的固定盒子样式设置*/
			#bottom_fixed {
				display: none;
				padding: 0;
				position: fixed;
				bottom: 0;
				left: 15%;
				width: 900px;
				height: 3em;
				margin: 0 auto;
				
				z-index: 400;
				
				
			}
			#bottom_fixed > div {
				width: 19.9%;
				height: 100%;
				font-size: 1em;
				line-height: 3em;
				float: left;
				color: #00FFFF;
				text-align: center;
				background-color: #434245;
				/*margin-left: -1px;*/
				border-right: 1px solid rgba(0, 255, 255, 1);
				
			}
			
			#bottom_fixed > div:last-child {
				
				border: none;
				
			}
			#bottom_fixed img {
				vertical-align: middle;
				position: relative;
				
			}
			
			
			/*以下为最顶部的header标签盒子里的样式设置*/
			
			#head_box {
				width: 900px;
				/*height: 500px;*/
				margin: 0;
				/*border: 1px red solid;*/
				margin: 10px auto;
				overflow: hidden;
				position: relative;
				z-index: 100;
				
			}
			/*位于最高处盒子id=head_box 里的第一个元素即第一个ul,id= headest_ul*/
			#headest_ul {
				margin-bottom: 20px;
				border-top: 5px double blue;
				clear: both;
				
			}
			#headest_ul > li {
				float: left;
				width: 12.5%;
				height: 3em;
				font-size: 1.2em;
				line-height: 3em;
				
				text-align: center;
				list-style: circle inside;
				padding: 5px 0px;
				
			}
			
			#headest_ul > li:hover {
				transition: all .4s;
				background-color: #00FFFF;
				/*border-radius: 20px;*/
				
			}
			/*令网页顶部的“关于我们” “公司合作”两个模块下的首先为隐藏状态的ul列表为隐藏,鼠标移至其上时就显示出来*/
			#aboutus_ul, #co-operate {
				transition: all .4s;
				background-color: #00FFFF;
				text-align: left;
				display: none;
				position: relative;
				z-index: 1;
				
			}
			.about_us:hover #aboutus_ul {
				transition: all .4s;
				background-color: #00FFFF;
				list-style: disc inside;
				display: block;
				height: 15em;
				
			}
			#gSiHeZuo:hover #co-operate {
				/*white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;*/
				transition: all .4s;
				background-color: #00FFFF;
				list-style: disc inside;
				display: block;
				
			}
			#co-operate li:first-of-type {
				font-size: 62.5%;
				line-height: 2em;
				text-align: center;
				
			}
			#aboutus_ul li:hover,
			#co-operate li:hover {
				transition: all .4s;
				background-color: #ffffcc;
			}
			
			/*#head_box > div {
				width: 90%;
				
				margin: 0 auto;
				
			}*/
			
			/*以下是存放 位于 专家核心团队 & 博士团队成员 区域的变化小圆圈的盒子*/
			.circle_father {
				width: 850px;
				height: 50px;
				/*border: 2px red solid;*/
				text-align: center;
				position: relative;
				margin: 100px auto -80px;
				
			}
			/*以下是 位于 专家核心团队 & 博士团队成员 区域的类名为 class = circle 的小圆圈样式设置*/
			.circle_father .circle {
				display: inline-block;
				width: 30px;
				height: 30px;
				margin: 10px 30px;
				border-radius: 50%;
				transition: all 0.4s;
				background-color: #0095ED;
				
				
			}
			/*调用的动画在css文件里的第 72行*/
			/*下面对class = circle 的各个span元素进行动画调用,该动画原本为设置 h2 里面的图片用的,这里当然也可以被其他元素调用同一个动画!!!*/
			
			span.circle:first-of-type,
			span.circle:last-of-type {
				background-color: gold;
				animation: scale 1s linear 0.6s infinite alternate;
			}
			span.circle:nth-of-type(2),
			span.circle:nth-of-type(3) {
				background-color: orange;
				animation: scale 1s linear 0.3s infinite alternate;
			}
			/*有相同样式的设置的元素选择器可以合并一起写*/
			 /*{
				background-color: orange;
				animation: scale 1s linear 0.3s infinite alternate;
			}*/
			/*span.circle:nth-of-type(4) {
				background-color: orange;
				animation: scale 1s linear 0.3s infinite alternate;
			}*/
			 /*{
				background-color: gold;
				animation: scale 1s linear 0.6s infinite alternate;
			}*/
			
			/*以下为专家核心团队 & 博士团队成员 专区,其 class = img_box的大盒子*/
			.img_box {
				
				width: 100%;
				padding: 0;
				margin-top: 120px;
				overflow: visible;
				
			}
			.img_box h2 {
				text-align: center;
				color: #0095ed;
				width: 100%;
				margin: 50px auto;
				padding: 30px;
				line-height: 40px;
				font-size: 30px;
				
			}
			.img_box ul {
				width: 100%;
				height: 750px;
				padding: 0;
				margin-left: 0;
				/*position: absolute;*/

			}
		
			.img_box ul li {
				transition: all .4s;
				margin: 0;
				padding: 0;
				width: 900px;
				height: 700px;
				/*float: left;*/
				margin: 0 15%;
				/*margin: 0;*/
			
				list-style: none;
			}
			
			#lun_bo_second {
				transition: all .4s;
				display: none;
				/*opacity: 0;*/
			}
			/*以下为装有序号1 2 的盒子,用以调整专家核心团队&博士团队成员区域的图片显示*/
			#lun_bo li.circle > div {
				display: inline-block;
				width: 2em;
				height: 2em;
				border-radius: 50%;
				text-align: center;
				margin: 10px auto;
				line-height: 1.8em;
				font-size: 2em;
			}
			#lun_bo li.circle img:hover {
				transition: all 0.4s;
				transform: scale(1.6);
				
				
			}
			
			
			/*以下为section标签部分的第二大盒子样式设置*/
			section {
				margin: 0 auto 100px;
				width: 90%;
				padding: 0;
				
			}
			/*以下为孵化(研究)成果展示区域， id = scie_research_area*/
			#scie_research_area {
				width: 900px;
				white-space: nowrap;
				margin: 150px auto 20px;
				padding: 0;
				
			}
			#scie_research_area h2 {
				text-align: center;
				color: #0095ed;
				margin-bottom: 20px;
				width: 850px;
				
				padding: 30px;
				line-height: 40px;
				font-size: 30px;
				
			}
			/*以下为存储在 id=scrie_research_area 的盒子内的  儿子图片, 孙子图片 为存储在 h2 里面的*/
			#scie_research_area > a > img {
				display: inline-block;
				margin: 10px;
				/*注意,将vertical-align用在img图片上让它顶部和div这样的盒子顶部对齐方式
				就可以避免因为div盒子大小变化造成对不齐而显得难看的情况了!!!*/
				vertical-align: top;
				animation: translate 1s linear infinite alternate;
				
			}
			#scie_research_area > a img:hover {
				transition: all 0.4s;
				border: 2px orange solid;
				box-shadow: 5px 6px 6px #00FFFF;
				animation-play-state: paused;
				
			}
			@-webkit-keyframes translate {
				from {transform: translate(0,0);box-shadow: #00FFFF 0 -10px 10px;}
				to {transform: translate(0,-10px);box-shadow: #0095ED 0 10px 6px;}
			}
			@keyframes translate {
				from {transform: translate(0,0);box-shadow: #00FFFF 0 -10px 10px;}
				to {transform: translate(0,-10px);box-shadow: #0095ED 0 6px 6px;}
			}
			#scie_research_area .ad_show {
				 display: inline-block;
				 border: 1px solid blue;
				 width: 180px;
				 height: 260px;
				 margin-bottom: -100px;
			}
			#scie_research_area .ad_show li:hover {
				transition: all 0.4s;
				background-color: #28DBC3;
				text-decoration: underline;
				transform: scale(1.1);
				
			}
			
			/*以下为微信公众号专区的最外层的最大盒子，其 id=weixin_area */
			#weixin_area {
				width: 100%;
				margin: 150px auto;
				padding: 0;
				position: relative;
				
				
			}
			/* 以下为微信公众号专区最外层盒子的小一级盒子 */
			#weixin_area01 {
				width: 900px;
				margin: 0 auto;
				padding: 0;
				
			}
			/* 以下为微信公众号专区最外层盒子的小一级盒子中的标题  h2 */
			#weixin_area h2 {
				text-align: center;
				color: #0095ed;
				width: 850px;
				margin: 50px auto;
				padding: 30px;
				line-height: 40px;
				font-size: 30px;
			}
			/* 以下为微信公众号专区最外层盒子的小一级盒子 下的各个子盒子，他们的类名class=wx_passage */
			#weixin_area01 > div {
				display: inline-block;
				border: #00FFFF 2px solid;
				width: 223px;
				height: 280px;
				margin: 5px 0px;
			}
			
			.wx_passage:hover:not(#wx_passage_last) {
				transition: all .4s;
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-ms-transition: all .4s;
				transform: scale(1.05);
				/* rotate3d(0, 0, 360deg); */
			}
			#wx_passage_last {
				transition: all .4s;
				overflow: hidden;
				position: absolute;
				
				z-index: 100;
			}
			#wx_passage_last > div:not(#wx_passage_last_son) {
				width: 100%;
				height: 55px;
				line-height: 55px;
				margin-top: 2px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				background-color: #00FFFF;
				
				
			}
			#wx_passage_last_son {
				padding-top: 5px;
				width: 100%;
				background-color: #F0F8FF;
			}
			
			#wx_passage_last:hover {
				/*width: 100%;*/
				height: 950px;
				border: 1px red solid;
				
			}
			/*关于装有清华大学,北京大学,中国科学院大学等五个大学微信公众号二维码图片的盒子*/
			#wx_passage_last_son p {
				margin-top: 5px;
				font-size: 75%;
				
			}
			#wx_passage_last_son img {
				cursor: zoom-in;
				transition: all 0.3s;
			}
			#wx_passage_last_son img:hover {
				transform: scale(2) translate(10px,10px);
				transition: all 0.3s;
			}
			
			/*以下为新闻公告 & 学术论文区域,id = news_div*/
			#news_div {
				width: 900px;
				padding: 0;
				margin: 150px auto 0 ;
				position: relative;
				clear: both;
				
			}
			#news_div h2 {
				text-align: center;
				color: #0095ed;
				width: 850px;
				margin: 30px auto;
				padding: 30px;
				line-height: 40px;
				font-size: 30px;
				
			}
			#news_div > div {
				position: relative;
				float: left;
				width: 48.5%;
				margin: 10px 6px;
				text-align: center;
				
			}
			#news_div  span {
				display: inline-block;
				
			}
			#news_son1 img[title] {
				position: relative; /*这里要注意,使用动画animation时一定要对目标元素设定定位position !!!*/
				animation: moveimg01 4s linear infinite alternate;
			}
			/*给   "新闻公告&学术论文"  区域的左侧三个图片设置左右重复移动的动画,更加生动*/
			@keyframes moveimg01 {
				from{top: 0;left: -100px; }
				to{top: 0;left: 100px;}
			}
			@-webkit-keyframes moveimg01 {
				from{top: 0;left: -100px; }
				to{top: 0;left: 100px;}
			}
			
			
			#news_son1 img:hover {
				transition: all 0.3s;
				box-shadow: 5px 5px 5px #00FFFF;
				animation-play-state: paused;
				border: 1px red solid;
				
			}
			.lookmore:hover {
				animation-play-state: paused;
			}
			
			#news_son1 {
				font-size: 75%;
				width: 50%;
				line-height: 3em;
				
				border-right: 1px dotted #0000FF;
				
			}
			#news_son1 > span {
				border: 1px solid red;
				display: block;
				
			}
			#news_son1 > a:hover {
				transition: all 0.3s;
				font-size: 1.2em;
				border: 2px double red;
				
			}
			/*#news_son2 {
				padding-top: 50px;
				
			}*/
			#news_son2 > div:not(last-child) {
				float: left;
				text-align: center;
			}
			/*查看更多的样式设置*/
			.lookmore {
				 margin: 10px auto;
				 border-radius: 30px;
				 width: 50%;
				 font-size: 1.5em;
				 line-height: 2em;
				 border: 2px red solid;
				 background: #FFFFCC;
				 opacity: 0.8;
				 cursor: pointer;
			}
			#campus_essay,
			#campus_journal {
				margin: 0;
				line-height: 3em;
				text-align: center;
				width: 49%;
				height: 25%;
				border-bottom: 5px solid red;
				margin-bottom: 10px;
				
			}
			#campus_essay:hover,
			#campus_journal:hover {
				transition: all 0.4s;
				background-color: #00FFFF;
			}
			
			#essay_journal {
				height: 75%;
				width: 100%;
				position: relative;
				border: 1px dashed black;
				
			}
			#essay_journal > ul {
				float: left;
				width: 50.2%;
				margin-left: -5px;
				list-style: disc inside;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: left;
				text-indent: 2em;
				line-height: 2em;
				font-size: 1em;
				
				/*position: relative;*/
				/*white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;*/
				
			}
			#essay_journal ul:hover {
				transition: all 0.3s;
				background-color: rgba(00, 255, 255, 0.6);
				
				
			}
			#essay_journal li:hover {
				transition: all 0.3s;
				background-color: white;
				font-weight: bold;
				
				list-style-type: none;
			}
			/*#essay_journal下首先隐藏的那个ul列表元素，其类名为 class=disappear_ul,在html文件的 383行*/
			.disappear_ul {
				transition: all 0.4s;
				display: none;
			}
			#essay_journal img {
				transition: all 0.4s;
				position: absolute;
				bottom: 0px;
				left: 44.5%;
				
				display: none;
			}
			#essay_journal:hover img,
			#essay_journal:hover .disappear_ul {
				transition: all 0.4s;
				transition: all 0.4s;
				display: block;
			}
			
			/*以下为 南京信大安全应急管理研究院标志图片 和 公司介绍文字的盒子的样式设置*/
			#introduction {
				 width: 900px;
				 margin: 750px auto -600px;
				 background: #f4f4f4;
				 height: 400px;
				 overflow: hidden;
			}
			#introduction h2 {
				 text-align: center;
				 line-height: 2em;
				 color: #0095ED;
				 
			}
			#introduction h2 button {
				transition: all 0.3s;
				font-size: 60%;
				line-height: 1.8em;
				border: none;
				color: white;
				background-color: #0FDBC3;
				border-radius: 10px;
				
			}
			#introduction h2 button:hover {
				transition: all .4s;
				font-size: 0.8em;
				cursor: pointer;
				background-color: #0095ED;
				
			}
			/*以下的图片是南京信大安全应急管理研究院标志，就是那个公司介绍文字左旁边的图片*/
			#introduction a img:first-of-type {
				 padding-top: 40px;
				 padding-right: 3px;
				 vertical-align: top;
				 
			}
			/*以下为 友情链接部分盒子的样式设置，其 id = extra_links*/
			/*里面有各大邮箱公司链接，政府部门，高德地图以及国际组织官网，中国大学官网等*/
			#extra_links {
				 margin: 700px auto -600px;
				 position: relative;
				 width: 900px;
				 font-size: 1em;
				 line-height: 3em;
			}
			#extra_links h3,
			#extra_links span {
				background-color: #6BAAFB;
				 text-align: center;
			}
			#extra_links summary {
				 background: #28DBC3;
				 opacity: 0.9;
				 
			}
			
			/*下面设置标签footer里面的各子元素样式*/
			footer {
				 width: 900px;
				 background: linear-gradient(to bottom, #6baafb, #28dbc3);
				 height: 300px;
				 margin: 800px auto 0;
				 
			}
			footer h3 {
				 
				 
				 background: goldenrod;
				 text-align: center;
				 line-height: 3em;
				 
				 
			}
			footer h3 span {
				display: inline-block;
				color: yellow; 
				
				/*下面给footer标签里的h3 标签里的 span标签里的的字体设置一个不断变化大小的动画,更加动感!!!*/
				animation: head3 2s linear infinite alternate;
			}
			@-webkit-keyframes head3{
				from{transform: scale(1);}
				to{width: 100%;height: 100%;background: linear-gradient(to bottom, #6baafb, #0fdbc3);}
			}
			@keyframes head3{
				from{transform: scale(1);}
				to{width: 100%;height: 100%;background: linear-gradient(to bottom, #6baafb, #0fdbc3);}
			}
			footer h3 + div {
				margin: 10px auto;
				text-align: center;
				
			}
			footer div img {
				cursor: zoom-in;
			}
			footer img:hover {
				transition: all 0.3s;
				transform: scale(1.5);
				
			}
